<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>网页布局</title>

<style>

*{

margin: 0;

padding: 0;

text-decoration: none;

list-style: none;

}

.main{

max-width: 1800px;

margin: auto;

}

.header,.nav,.container,.footer{
float: left;
width: 100%;

box-sizing: border-box;

}

.header{

background: #ccc;

padding: 20px;

text-align: center;

}

.nav{

background: #333;

}

.nav a{

color: #fff;

padding: 10px 20px;

display: inline-block;

}

.nav a:hover{

background: #bbb;

color: #000;

}


.lside{

width: 200px;

float: left;

}

.rside{

width: 200px;

float: right;

}



.content{

margin: 0px 205px;

}

.lside,.rside,.content{

padding: 5px;

box-sizing: border-box;

}

.footer{

padding: 10px;

background: #ccc;

text-align: center;

}



@media screen and (max-width:700px) {

.lside,.rside,.content{

width: 100%;

margin: 0px;

}

}

</style>

</head>

<body>

<div class="main">

<div class="header">

<h1>我是网页的头部</h1>

<p>这里主要是放网站的logo或是banner广告</p>

</div>

<div class="nav">

<a href="#">导航项</a>

<a href="#">导航项</a>

<a href="#">导航项</a>

<a href="#">导航项</a>

</div>

<div class="container">



<div class="lside">

<h2>我是左边栏</h2>

<p>

我是左边栏的内容我是左边栏的内容我是左边栏的内容

我是左边栏的内容我是左边栏的内容我是左边栏的内容

我是左边栏的内容我是左边栏的内容我是左边栏的内容

我是左边栏的内容我是左边栏的内容我是左边栏的内容

我是左边栏的内容我是左边栏的内容我是左边栏的内容

</p>

</div>

<div class="rside">

<h2>我是右边栏</h2>

<p>

我是右边栏的内容我是右边栏的内容我是右边栏的内容

我是右边栏的内容我是右边栏的内容我是右边栏的内容

我是右边栏的内容我是右边栏的内容我是右边栏的内容

我是右边栏的内容我是右边栏的内容我是右边栏的内容

我是右边栏的内容我是右边栏的内容我是右边栏的内容

</p>

</div>

<div class="content">

<h2>我是中间栏</h2>

<p>

我是中间栏的内容我是中间栏的内容我是中间栏的内容

我是中间栏的内容我是中间栏的内容我是中间栏的内容

我是中间栏的内容我是中间栏的内容我是中间栏的内容

我是中间栏的内容我是中间栏的内容我是中间栏的内容

我是中间栏的内容我是中间栏的内容我是中间栏的内容

我是中间栏的内容我是中间栏的内容我是中间栏的内容

我是中间栏的内容我是中间栏的内容我是中间栏的内容

我是中间栏的内容我是中间栏的内容我是中间栏的内容

</p>

</div>

</div>

<div class="footer">

<p>我是网页的底部，主要放版权声明，备案信息，联系方式，友情链接等。</p>

</div>

</div>

</body>

</html> 